<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>智能安东</title>
		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../css/app.css" />
		<link href="../css/mui.picker.css" rel="stylesheet" />
		<link href="../css/mui.poppicker.css" rel="stylesheet" />
		<!--<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />-->
		<style>
			.mui-btn {
				font-size: 16px;
				padding: 8px;
				margin: 3px;
			}
			h5.mui-content-padded {
				margin-left: 3px;
				margin-top: 20px !important;
			}
			h5.mui-content-padded:first-child {
				margin-top: 12px !important;
			}
			.mui-table h4,.mui-table h5,.mui-table .mui-h5,.mui-table .mui-h6,.mui-table p{
		        margin-top: 0;
		    }
		    .mui-table h4{
		        line-height: 21px;
		        font-weight: 500;
		    }
		
		    .mui-table .oa-icon{
		        position: absolute;
		        right:0;
		        bottom: 0;
		    }
		    .mui-table .oa-icon-star-filled{
		        color:#f14e41;
		    }
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a id="menu" class="mui-action-menu mui-icon mui-icon-bars mui-pull-right" href="#topPopover"></a>
			<h1 class="mui-title">智能安东</h1>
		</header>
		<div class="mui-content">
			<div class="mui-content-padded">
				<div class="mui-row">
					<div class="mui-col-sm-4">
						<button id='linePicker' class="mui-btn mui-btn-block" type='button'>产线</button>
					</div>
					<div class="mui-col-sm-4">
						<button id='statusPicker' class="mui-btn mui-btn-block" type='button'>状态</button>
					</div>
					<div class="mui-col-sm-4">
						<button id='datePicker' class="mui-btn mui-btn-block" type='button'>日期</button>
					</div>
				</div>		
			</div>
			
		    <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
		        <li class="mui-table-view-cell" id="err1">
		            <div class="mui-table">
		                <div class="mui-table-cell mui-col-xs-10">
		                    <h4 class="mui-ellipsis">物料异常</h4>
		                    <h5>上报人：李四</h5>
		                    <p class="mui-h6 mui-ellipsis">时间：2017-04-15 12:25</p>
		                </div>
		                <div class="mui-table-cell mui-col-xs-2 mui-text-right">
		                    <span class="mui-h5">未处理</span>
		                </div>
		            </div>
		        </li>
		        <li class="mui-table-view-cell" id="err2">
		            <div class="mui-table">
		                <div class="mui-table-cell mui-col-xs-10">
		                    <h4 class="mui-ellipsis">生产缺料</h4>
		                    <h5>上报人：欧阳</h5>
		                    <p class="mui-h6 mui-ellipsis">时间：2017-04-15 12:25</p>
		                </div>
		                <div class="mui-table-cell mui-col-xs-2 mui-text-right">
		                    <span class="mui-h5">已处理</span>
		                </div>
		            </div>
		        </li>
		        <li class="mui-table-view-cell" id="err3">
		            <div class="mui-table">
		                <div class="mui-table-cell mui-col-xs-10">
		                    <h4 class="mui-ellipsis">设备异常</h4>
		                    <h5>上报人：张三</h5>
		                    <p class="mui-h6 mui-ellipsis">时间：2017-05-01 09:19</p>
		                </div>
		                <div class="mui-table-cell mui-col-xs-2 mui-text-right">
		                    <span class="mui-h5">已处理</span>
		                </div>
		            </div>
		        </li>
		    </ul>
		
		</div>
		<script src="../js/mui.min.js"></script>
		<!--<script src="../js/mui.picker.min.js"></script>-->
		<script src="../js/mui.picker.js"></script>
		<script src="../js/mui.poppicker.js"></script>
		<script src="../js/city.data.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
		<script>
			(function($, doc) {
				$.init();
				$.ready(function() {
					/**
					 * 获取对象属性的值
					 * 主要用于过滤三级联动中，可能出现的最低级的数据不存在的情况，实际开发中需要注意这一点；
					 * @param {Object} obj 对象
					 * @param {String} param 属性名
					 */
					var _getParam = function(obj, param) {
						return obj[param] || '';
					};
					//普通示例
					var lnPicker = new $.PopPicker();
					lnPicker.setData([{
						value: 'ywj',
						text: '1900'
					}, {
						value: 'aaa',
						text: 'CT50'
					}, {
						value: 'lj',
						text: '1300'
					}, {
						value: 'ymt',
						text: '1400'
					}, {
						value: 'shq',
						text: 'XXX'
					}]);
					var linePickerBt = doc.getElementById('linePicker');
					//var userResult = doc.getElementById('userResult');
					linePickerBt.addEventListener('tap', function(event) {
						lnPicker.show(function(items) {
							linePickerBt.innerText = items[0].text;
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
					}, false);
					//-----------------------------------------
					//级联示例
					var stPicker = new $.PopPicker();
					stPicker.setData([{
						value: 'ywj',
						text: '未处理'
					}, {
						value: 'aaa',
						text: '已处理'
					}, {
						value: 'lj',
						text: '已完成'
					}, {
						value: 'ymt',
						text: '待处理'
					}]);
					var stPickerBt = doc.getElementById('statusPicker');
					//var userResult = doc.getElementById('userResult');
					stPickerBt.addEventListener('tap', function(event) {
						stPicker.show(function(items) {
							stPickerBt.innerText = items[0].text;
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
					}, false);
					//-----------------------------------------
					//					//级联示例
					document.getElementById("datePicker").addEventListener('tap', function() {
						var dDate = new Date();
						dDate.setFullYear(2014, 7, 16);
						var minDate = new Date();
						minDate.setFullYear(2010, 0, 1);
						var maxDate = new Date();
						maxDate.setFullYear(2016, 11, 31);
						plus.nativeUI.pickDate(function(e) {
							var d = e.date;
							document.getElementById("datePicker").innerText = d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate();
						}, function(e) {
							document.getElementById("datePicker").innerText = "没有选择日期";
						}, {
							title: "请选择日期",
							date: dDate,
							minDate: minDate,
							maxDate: maxDate
						});
					})
				});
			})(mui, document);
			
			document.getElementById('err1').addEventListener('tap', function(e) {
				e.detail.gesture.preventDefault(); //修复iOS 8.x平台存在的bug，使用plus.nativeUI.prompt会造成输入法闪一下又没了
				var btnArray = ['取消', '处理'];
				mui.prompt('快速问题解决方案：', '', '处理', btnArray, function(e) {
					if (e.index == 1) {
						mui.toast(e.value);
						//info.innerText = '谢谢你的评语：' + e.value;
					} else {
						mui.toast('cancel');
						//info.innerText = '你点了取消按钮';
					}
				})
			});
			
		</script>
	</body>

</html>